<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/risk.css">
    <link href="https://unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
    <script src="https://unpkg.com/layui@2.7.6/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>风险区域管理</title>
</head>
<?php
require_once './device/mysql.php';
class MyDB_risk extends MySQL
{
    function connect()
    {
        $conn = parent::connect();
        return $conn;
    }

    # 查询用户ID
    public function get_userId($key)
    {
        return parent::get_userId($key);
    }
}
?>

<body>
    <?php
    require_once './device/check.php';  //导入key检测函数
    class check extends Check_key
    {
        public function check_key()
        {
            return parent::check_key();
        }
    }
    $check = new check();
    $ID = $check->check_key(); //如果key存在且正确，返回用户ID，否则会返回false
    if ($ID != false) {
        $db_risk = new MyDB_risk();
        $conn = $db_risk->connect();
        // 执行查询的代码
        $table = $ID . '_risk_district';
        $sql = "SELECT * FROM `$table`";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            // 输出数据
            while ($row = $result->fetch_assoc()) {
                $images = $row['images'];
                $title  = $row['risk_name'];
                $introduce = $row['risk_introduce'];
                $is_true = $row['is_true'];
                $risk_distance = $row['risk_distance'];
                $distance = $row['distance'];
                if ($is_true == '1') {
                    //echo '<script>console.log("true")</script>';
                    $is_true = 'checked=""';
                    $state = '<span class="layui-badge layui-bg-blue">预警中</span>';
                    $state_distance = ' <span class="layui-badge">最近' . $distance . 'M</span>';
                } else {
                    //echo '<script>console.log("false")</script>';
                    $is_true = '';
                    $state = '';
                    $state_distance = '';
                }
                echo '<div class="tl-card tl-color-' . rand(0, 2) . '" *ngFor="let item of listData">';
                echo '<div class="tl-p10">';
                echo '<img src="https://s1.ax1x.com/2023/01/08/pSZnatg.png" alt="" class="tl-img-left">';
                echo '<div class="tl-title">';
                echo '<div class="tl-font-16 tl-h32">';
                echo '<span class="tl-p-left-10">' . $title . '</span> ' . $state . $state_distance . '</div>';
                echo '<div class="tl-font-14 tl-h32">';
                echo '<span class="tl-p-left-10">' . $introduce . '</span></div></div>';
                echo <<<HTML
        <div class="more hiddle">
                    <div class="right_img"><img src=$images alt="请求图片..."></div>
                    <!--表单-->
                    <div class="content">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item" pane="">
                                <label class="layui-form-label">服务状态：</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="switch" lay-skin="switch" lay-text="开|关" $is_true>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">靠近提醒：</label>
                                <div class="layui-input-block">
                                    <select name="interest" lay-filter="aihao">
                                        <option value="">$risk_distance 米</option>
                                        <option value="0">5米</option>
                                        <option value="1">10米</option>
                                        <option value="2">15米</option>
                                        <option value="3">30米</option>
                                        <option value="4">50米</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">备注更新：</label>
                                <div class="layui-input-block">
                                    <textarea placeholder=$introduce class="layui-textarea" name="desc"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text hiddle">
                                <label class="layui-form-label">name</label>
                                <div class="layui-input-block">
                                    <textarea placeholder=$introduce class="layui-textarea" name="id">$title</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn btn-grad" type="submit" lay-submit="" lay-filter="demo1">立即更新</button>
                            </div>
                        </form>
                    </div>
                    
                </div>
        HTML;;
                echo '</div></div>';
            }
        } else {
            echo '<button class="layui-btn btn-grad">你还没有预警的区域呢</button>';
        }
        $conn->close();

        $timestamp = time();
        echo <<<HHH
</body>
<script>
    let childTwo = $('.tl-title')
    $(childTwo).click(function() {
        // 获取下标方式
        let idx = $(childTwo).index(this)
        //$(".menu_list_button").eq(idx).removeClass('hiddle');
        if ($(".more").eq(idx).is('.hiddle')) {
            $(".more").addClass('hiddle');
            $(".more").eq(idx).removeClass('hiddle');
        } else {
            $(".more").eq(idx).addClass('hiddle');

        }

    })

    layui.use('form', function() {
        var form = layui.form;
        //提交
        form.on('submit(demo1)', function(data) {
            
            //console.log(data.field);
            
            data.field["timestamp"] = $timestamp;
            data.field["table_id"] = $ID;
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                url: './device/sql_up.php',
                method: 'post',
                data: data.field,
                dataType: 'JSON',
                success: function(res) {
                    if (res.code == '0') {
                        console.log(res.msg);
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 3000
                        }, function() {
                            location.reload();
                        });
                    } else
                        layer.msg(res.msg, {
                            icon: 0,
                            time: 3000
                        });
                },
            });
            return false;
        });
    });
</script>

</html>
HHH;
    } else {
        $url = "index.php";
        echo "<script type='text/javascript'>";
        echo "window.location.href='$url'";
        echo "</script>";
        exit;
    }
